<template>
    <div class="app-container">
        <el-form ref="queryForm" :inline="true">
            <el-form-item label="语言" prop="lang">
                <el-select v-model="lang" placeholder="请选择语言" style="width: 240px">
                    <el-option v-for="item in code_lang" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="search" @click="handleFormat">格式化</el-button>
            </el-form-item>
        </el-form>

        <codemirror v-model="code" placeholder="Code goes here..." :style="{ height: '600px' }" :autofocus="true"
            :indent-with-tab="true" :tab-size="2" :extensions="extensions" @ready="handleReady"
            @change="log('change', $event)" @focus="log('focus', $event)" @blur="log('blur', $event)" />
    </div>
</template>

<script setup>
import { Codemirror } from 'vue-codemirror'
import { json } from '@codemirror/lang-json'
import { oneDark } from '@codemirror/theme-one-dark'


const { proxy } = getCurrentInstance();

const lang = ref("json")
const code = ref()
const extensions = [json(), oneDark]

// Codemirror EditorView instance ref
// const view = shallowRef()

const dicts = ["code_lang"];
const dictRefs = proxy.useDict(...dicts);
const { code_lang } = dictRefs;


const handleFormat = () => {

}

const view = ref()
// Codemirror 初始化完成的回调
const handleReady = (payload) => {
    view.value = payload.view
}

const log = console.log;

// // 获取 Codemirror 状态信息的方法
// const getCodemirrorStates = () => {
//     if (!view.value) return

//     const state = view.value.state
//     const ranges = state.selection.ranges
//     const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
//     const cursor = ranges[0].anchor
//     const length = state.doc.length
//     const lines = state.doc.lines

//     console.log({
//         selectedLength: selected,
//         cursorPosition: cursor,
//         documentLength: length,
//         totalLines: lines,
//     })

//     // 返回状态信息或进行其他处理
// }


</script>